<template>
    <tn-navbar fixed :bordered="false" bg-color="linear-gradient(180deg, #d8e5ff, #d8e5ff, #ffffff);">车场预警</tn-navbar>

    <view class="tn-white_bg  ">

        <view v-for="(item, index) in dataList" :key="index">


            <view class="tn-shadow tn-p-sm"
                style="    background: linear-gradient(180deg, #e8e5ff, #d8f5ff, #ffffff); ">
                <view class="first-line tn-flex tn-flex-row  justify-between ">
                    <view class="tn-flex tn-blue_text">
                        <tn-icon name="mammoth" style=" font-size: 56rpx;"></tn-icon>
                        <text class="tn-text-lg tn-text-bold ">
                            {{ item.name }}-通道视频
                        </text>
                    </view>
                    <view class="tn-flex">
                        <tn-button bg-color="tn-aquablue" shadow>
                            <text class="tn-text-bold">监控切换</text>
                        </tn-button>

                    </view>
                </view>
                <view class=" tn-p-sm">
                    <view class="image-piccapsule2" :style="'background-image: url(' + item.defaultPath + ');'">
                        <view class="image-capsule2">
                            <view class="tn-flex tn-flex-row  justify-center">
                                <tn-icon name="video-fill" color="tn-white" style="font-size: 60rpx"></tn-icon>
                            </view>
                        </view>
                    </view>
                </view>

            </view>


            <view class="tn-shadow tn-p-sm tn-mt"
                style="    background: linear-gradient(180deg, #e8e5ff, #d8f5ff, #ffffff); ">
                <view class="first-line tn-flex tn-flex-center   justify-between  tn-text-lg">
                    <view class="tn-flex tn-teal-dark_text">
                        <tn-title title="车辆信息" mode="dot" assist-color="tn-teal" size="lg" />


                    </view>
                    <view class="tn-flex tn-flex-center  justify-between ">

                        <text> {{ carPlate }} </text>

                        <tn-button text @click="openEditPopup">
                            <text>修改</text>
                        </tn-button>
                    </view>
                </view>
                <view class=" tn-p-sm">
                    <view class="image-piccapsule2" :style="'background-image: url(' + item.defaultPath + ');'">
                        <view class="image-capsule2">
                            <view class="tn-flex tn-flex-row  justify-center">
                                <tn-icon name="video-fill" color="tn-white" style="font-size: 60rpx"></tn-icon>
                            </view>
                        </view>
                    </view>
                </view>
                <view>
                    <tn-scroll-list>
                        <view class="item-container">
                            <view class="scroll-item tn-flex-center tn-flex-column">
                                <view class="    ">
                                    <tn-icon name="open" :size="50" color="tn-blue"></tn-icon>
                                </view>
                                <view class="title">手动进场</view>
                            </view>
                            <view class="scroll-item tn-flex-center tn-flex-column">
                                <view class="    ">
                                    <tn-icon name="monitor" :size="50" color="tn-teal"></tn-icon>
                                </view>
                                <view class="title">远程开闸</view>
                            </view>
                            <view class="scroll-item tn-flex-center tn-flex-column">
                                <view class="     ">
                                    <tn-icon name="monitor-fill" :size="50" color="tn-red"></tn-icon>
                                </view>
                                <view class="title">远程落闸</view>
                            </view>
                            <view class="scroll-item tn-flex-center tn-flex-column">
                                <view class="   ">
                                    <tn-icon name="group-null" :size="50" color="tn-indigo"></tn-icon>
                                </view>
                                <view class="title"> 免费出场</view>
                            </view>
                            <view class="scroll-item tn-flex-center tn-flex-column">
                                <view class="    ">
                                    <tn-icon name="close-circle" :size="50" color="tn-brown"></tn-icon>
                                </view>
                                <view class="title">取消出场</view>
                            </view>
                        </view>
                    </tn-scroll-list>
                </view>

            </view>

        </view>

        <tn-popup v-model="isPopupVisible" width="100%" open-direction="top" top="45">
            <view class="tn-m-sm tn-p-sm">
                <tn-form ref="formRef" :model="formData" :rules="formRules" label-position="top">
                    <tn-form-item label="原车牌">
                        <tn-input v-model="formData.carPlate" disabled :custom-class="{ color: '#00D886' }"></tn-input>
                    </tn-form-item>
                    <tn-form-item label="新车牌">
                        <tn-input v-model="formData.newCarPlate"></tn-input>
                    </tn-form-item>
                  
                   
                    <view class="tn-flex justify-between">
                        <tn-button @click="closePopup">取消</tn-button>
                        <tn-button @click="confirmEdit">确认</tn-button>
                    </view>
                </tn-form>
            </view>
        </tn-popup>
    </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import CfIOTUtil from "@/cfsheep/api/iot/iot";
import {onLoad} from "@dcloudio/uni-app";
import dayjs from "dayjs";
const carPlate = ref('浙BABD321')
const deviceList = ref({
  licensePlate: {
    adminer: 0,
    areaId: 0,
    areaName: "",
    associationAreaId: 0,
    associationAreaName: "",
    associationCheckPointId: 0,
    associationCheckPointName: "",
    authenticationMode: 0,
    bindCloudPlatforms: 1,
    brand: "",
    cfFilePlatform: '',
    checkPointId: "",
    checkPointName: "",
    deviceKey: "",
    deviceLevel: 0,
    deviceName: "",
    deviceNo: "",
    deviceSecret: "",
    deviceType: 2,
    encryption: 0,
    filePlatform: "",
    filePlatformId: "",
    id: 0,
    indexNo: 1,
    ip: "",
    lastOnlineTime: 0,
    macAddress: "",
    model: "",
    networkProtocol: "mqtt",
    noticed: 0,
    outputTerminalType: 1,
    password: "",
    portNo: null,
    power: "0",
    productId: "0",
    sdkDownloadAddress: "",
    sdkHashMd5: "",
    sdkVersion: "",
    serialNo: "",
    showRows: 0,
    status: 1,
    username: "",
    videoAddress: ""
  }, //车牌识别设备
  monitor: {} //监控设备
})
const isPopupVisible = ref(false);
const formData = ref({
    id:null,
    carPlate: null,
    newCarPlate:null,
    carType: 0,
});
const openEditPopup = () => {
    formData.value.carPlate = carPlate.value;
    formData.value.newCarPlate = carPlate.value;
    isPopupVisible.value = true;
};

const closePopup = () => {
    isPopupVisible.value = false;
};
const confirmEdit = () => {
    // 确认修改逻辑
    closePopup();
};
const dataList = ref([
    {
        id: 1,
        name: "样式停车场",
        defaultPath:
            "https://statics.ys7.com/device/image/CS-H6-V100-1H3F4GA/101.jpeg",
    },
]);

onLoad((_licensePlate: any)=>{
  deviceList.value.licensePlate = JSON.parse(_licensePlate.id);
});

/**
 * 获取设备远程视频流地址，默认 flv 流格式， ws-flv 流地址
 */
const getVideo = async () => {
  const _deviceList = await CfIOTUtil.getRemoteVideo({
    id: deviceList.value.licensePlate.id,
    videType : 'flv',
    videoProto : 'ws',
  });
  if(_deviceList.code == 10002){
    deviceList.value.licensePlate.videoAddress = _deviceList.data;
  }else{
    deviceList.value.licensePlate.videoAddress = '';
  }
};

</script>
<style lang="scss" scoped>
/* 阴影 start*/

 

/* 图片banner*/
.image-capsule2 {
    padding: 120rpx 0rpx;
    position: relative;
}

.image-piccapsule2 {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: center;
    border-radius: 15rpx;
}

/* 播放图标 start */
.play-icon {
    background-color: #faf5f5e3;
    width: 80rpx;
    height: 80rpx;
    font-size: 40rpx;
    border-radius: 50%;
    z-index: 1;
}

.item-container {
    position: relative;
    width: fit-content;

    display: flex;
    flex-wrap: nowrap;

    .scroll-item {
        flex-grow: 1;
        flex-shrink: 0;
        margin: 0rpx 15rpx;

        .empty {
            width: 100rpx;
            height: 100rpx;
            border-radius: 15rpx;
        }

        .title {
            margin-top: 10rpx;
        }
    }
}
</style>
